<template>
	<van-dropdown-menu>
		<van-dropdown-item :title="processTitle" ref="processRef">
			<div class="process-item">
				<div class="process-item-box">
					<van-cell>
						<template #title>
							<van-checkbox v-model="checkedAll" @click="AllClick">
								全部流程
							</van-checkbox>
						</template>
					</van-cell>
					<van-checkbox-group
						v-model="groupChecked"
						ref="checkboxGroup"
						@click="groupChange"
					>
						<van-cell v-for="item in processData" :key="item.process_key">
							<template #title>
								<van-checkbox :name="item.process_key">
									{{ item.process_name }}
								</van-checkbox>
							</template>
							<template #value>
								<span>
									{{ item.count }}
								</span>
							</template>
						</van-cell>
					</van-checkbox-group>
				</div>
				<div class="menu-bottom">
					<van-button @click="onReset"> 重置 </van-button>
					<van-button type="primary" @click="onConfirm"> 确定 </van-button>
				</div>
			</div>
		</van-dropdown-item>
	</van-dropdown-menu>
</template>

<script lang="ts" setup>
import { defineProps, ref } from 'vue'
const props = defineProps<{
	processData: []
	title: string
}>()
const checkedAll = ref(false)
const groupChecked = ref([])
const checkboxGroup = ref()
const emit = defineEmits(['confirm'])
const processRef = ref()
const processTitle = ref(props.title)

// 成功
const onConfirm = () => {
	emit('confirm', groupChecked.value)
	processTitle.value = `已选${groupChecked.value?.length}项`
	processRef.value.toggle()
}
// 重置
const onReset = () => {
	checkboxGroup.value.toggleAll(false)
	checkedAll.value = false
	groupChecked.value = []
}
const AllClick = () => {
	checkboxGroup.value.toggleAll(checkedAll.value)
}
const groupChange = () => {
	alert(1)
}
</script>
<style lang="less">
.process-item {
	position: relative;
	height: 413px;
	overflow: hidden;
}
.process-item-box {
	height: 100%;
	overflow: auto;
}
.menu-bottom {
	position: absolute;
	bottom: 0;
}
</style>
